<div class="search-bar mb-4">
    <i class="bi bi-search"></i>
    <input type="text" class="form-control" placeholder="搜索课程、教练...">
</div>

<h5 class="mb-3">热门课程</h5>
<div class="row mb-4">
    <div class="col-6 col-md-4 mb-3">
        <div class="card course-card h-100">
            <img src="https://images.unsplash.com/photo-1545205597-3d9d02c29597?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" class="card-img-top" alt="核心普拉提">
            <div class="card-body">
                <span class="badge badge-course mb-2">核心训练</span>
                <h6 class="card-title">核心普拉提</h6>
                <p class="card-text text-muted small">45分钟 · 中级</p>
            </div>
            <div class="card-footer bg-white border-0">
                <button class="btn btn-sm btn-outline-primary w-100">立即预约</button>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-4 mb-3">
        <div class="card course-card h-100">
            <img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" class="card-img-top" alt="塑形普拉提">
            <div class="card-body">
                <span class="badge badge-course mb-2">塑形减脂</span>
                <h6 class="card-title">塑形普拉提</h6>
                <p class="card-text text-muted small">60分钟 · 初级</p>
            </div>
            <div class="card-footer bg-white border-0">
                <button class="btn btn-sm btn-outline-primary w-100">立即预约</button>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-4 mb-3">
        <div class="card course-card h-100">
            <img src="https://images.unsplash.com/photo-1571019614242-c5c5dee9f50b?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" class="card-img-top" alt="康复普拉提">
            <div class="card-body">
                <span class="badge badge-course mb-2">康复训练</span>
                <h6 class="card-title">康复普拉提</h6>
                <p class="card-text text-muted small">60分钟 · 私教</p>
            </div>
            <div class="card-footer bg-white border-0">
                <button class="btn btn-sm btn-outline-primary w-100">立即预约</button>
            </div>
        </div>
    </div>
</div>

<div class="d-flex justify-content-between align-items-center mb-3">
    <h5>本周课表</h5>
    <a href="#" class="text-primary">查看全部</a>
</div>

<!--
<div class="schedule-day">
    <h6 class="text-primary">今天 · 5月15日</h6>
    <div class="class-slot">
        <div class="d-flex justify-content-between">
            <div>
                <strong>核心普拉提</strong>
                <div class="text-muted small">09:00-09:45 · 张教练</div>
            </div>
            <button class="btn btn-sm btn-primary">预约</button>
        </div>
    </div>
    <div class="class-slot booked">
        <div class="d-flex justify-content-between">
            <div>
                <strong>塑形普拉提</strong>
                <div class="text-muted small">10:30-11:30 · 李教练</div>
            </div>
            <span class="badge bg-success">已预约</span>
        </div>
    </div>
    <div class="class-slot">
        <div class="d-flex justify-content-between">
            <div>
                <strong>康复普拉提</strong>
                <div class="text-muted small">18:00-19:00 · 王教练</div>
            </div>
            <button class="btn btn-sm btn-primary">预约</button>
        </div>
    </div>
</div>
-->

<div class="schedule-day">
    <h6 class="text-primary">今天 · 5月15日</h6>

    <!-- 可预约课程 -->
    <div class="class-slot">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <strong>核心普拉提</strong>
                <div class="text-muted small">09:00-09:45 · 张教练</div>
            </div>
            <button class="btn btn-sm btn-primary rounded-pill px-3">预约</button>
        </div>
    </div>

    <!-- 已预约课程 - 新版设计 -->
    <div class="class-slot booked">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <strong>塑形普拉提</strong>
                <div class="text-muted small">10:30-11:30 · 李教练</div>
            </div>
            <div class="d-flex align-items-center">
                <i class="bi bi-check-circle-fill text-success me-1"></i>
                <span class="text-success small">已预约</span>
                <button class="btn btn-sm btn-outline-danger rounded-pill px-2 ms-2">
                    <i class="bi bi-x"></i>
                </button>
            </div>
        </div>
    </div>

    <!-- 另一个可预约课程 -->
    <div class="class-slot">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <strong>康复普拉提</strong>
                <div class="text-muted small">18:00-19:00 · 王教练</div>
            </div>
            <button class="btn btn-sm btn-primary rounded-pill px-3">预约</button>
        </div>
    </div>
</div>

<div class="d-flex justify-content-between align-items-center mb-3 mt-4">
    <h5>推荐教练</h5>
    <a href="#" class="text-primary">查看全部</a>
</div>

<div class="row">
    <div class="col-6 col-md-4 mb-3">
        <div class="card coach-card h-100">
            <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" class="card-img-top" alt="张教练">
            <div class="card-body text-center">
                <h6 class="card-title mb-1">张教练</h6>
                <p class="card-text text-muted small">普拉提认证教练 · 5年经验</p>
                <div class="d-flex justify-content-center">
                    <span class="badge bg-light text-dark me-1">核心训练</span>
                    <span class="badge bg-light text-dark">塑形减脂</span>
                </div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-4 mb-3">
        <div class="card coach-card h-100">
            <img src="https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" class="card-img-top" alt="李教练">
            <div class="card-body text-center">
                <h6 class="card-title mb-1">李教练</h6>
                <p class="card-text text-muted small">康复普拉提专家 · 8年经验</p>
                <div class="d-flex justify-content-center">
                    <span class="badge bg-light text-dark me-1">康复训练</span>
                    <span class="badge bg-light text-dark">孕产普拉提</span>
                </div>
            </div>
        </div>
    </div>
</div>